import React, { useState, useContext } from 'react';


// 公共部分
type ContextType = { count: number, setCount: React.Dispatch<React.SetStateAction<number>> }
const APPContext = React.createContext<ContextType>({} as ContextType);

export const AppContextWrapper = (props: { children: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | null | undefined; }) => {
    const [count, setCount] = useState(0);
    return <APPContext.Provider value={{ count, setCount }}>
        {props.children}
    </APPContext.Provider>
}


// 实际部分 操作
export const PublicFun = () => {
    return (
        <AppContextWrapper>
            <SonFun></SonFun>
        </AppContextWrapper>
    )
}


export const SonFun = () => {
    // 解构一下
    const {count,setCount} = useContext(APPContext);
    const [number, setNumber] = useState(0);
    const AddFun = ()=>{
        setCount(e=>e+1)
    }
    return (
        <>
            <p>我是子组件</p>
            <p>数字：{number}|| {count }</p>
            <button onClick={() => {
                setNumber(e => e + 1)
            }}>加1</button>
            <button onClick={AddFun}>增加公用</button>
        </>
    )
}